<template>
	<view class="ys">
		<view class="infoli">
			<view class="title">
				姓名<text>*</text>
			</view>
			<uni-easyinput v-model="name" placeholder="请输入姓名"></uni-easyinput>
		</view>
		<view class="infoli">
			<view class="title">
				手机<text>*</text>
			</view>
			<uni-easyinput v-model="phone" placeholder="请输入手机"></uni-easyinput>
		</view>
		<view class="infoli">
			<view class="title">
				访问房屋<text>*</text>
			</view>
			<view class="selectbox">
				<uni-data-select v-model="houseId" :localdata="houseList" @change="change"></uni-data-select>
			</view>
		</view>
		<view class="infoli">
			<view class="title">
				访问房间<text>*</text>
			</view>
			<view class="selectbox">
				<uni-data-select v-model="houseRoomId" :localdata="RoomList"></uni-data-select>
			</view>
		</view>
		<view class="infoli">
			<view class="title">
				到访事由
			</view>
			<view>
				<uni-easyinput v-model="content" type="textarea" placeholder="请输入到访事由"></uni-easyinput>
			</view>
		</view>
		<button class="submit" :loading="loading" :disabled="loading" @click="send">提交</button>
	</view>
</template>

<script>
	import {
		houseRoom,
		visitorAdd
	} from "@/api/api.js"
	export default {
		data() {
			return {
				name: '',
				phone: '',
				toname: '',
				content: '',
				loading: false,
				houseId: '',
				houseRoomId: '',
				houseList: [],
				RoomList: [],
				list: [],

			}
		},
		onLoad() {
			this.houseRoom()
		},
		methods: {
			change(e) {
				let i = this.list.findIndex(item => item.houseId == e)
				let arr = this.list[i].roomList
				arr.forEach(item => {
					this.RoomList.push({
						text: item.roomName,
						value: item.roomId
					})
				})
				console.log(i, arr, this.RoomList);
			},
			houseRoom() {
				houseRoom().then(res => {
					if (res.code == 200) {
						this.list = res.data
						this.list.forEach(item => {
							this.houseList.push({
								text: item.houseName,
								value: item.houseId
							})
						})
						console.log(this.houseList);
					}
				})
			},
			send() {
				if (this.name == '') return uni.$showMsg('请输入姓名')
				if (this.phone == '') return uni.$showMsg('请输入手机')
				if (this.houseId == '') return uni.$showMsg('请选择访问房屋')
				if (this.houseRoomId == '') return uni.$showMsg('请选择访问房间')
				if (this.content == '') return uni.$showMsg('请输入到访事由')
				var that = this
				that.loading = true
				visitorAdd({
					houseId: that.houseId,
					houseRoomId: that.houseRoomId,
					visitorMobile: that.phone,
					visitorName: that.name,
					visitorReason: that.content
				}).then(res => {
					that.loading = false
					uni.$showMsg(res.msg)
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-top: 20px;
	}

	.ys {
		background: #fff;
		width: 96%;
		margin: 0 auto;
		padding: 15px;
		box-sizing: border-box;
		border-radius: 8px;
	}

	.selectbox {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
	}

	.infoli {
		width: 100%;
		margin-bottom: 10px;

		.title {
			font-weight: bold;
			font-size: 14px;
			margin-bottom: 10px;

			text {
				color: #f00;
			}
		}
	}
</style>